<template>
  <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon>
  <el-form-item label="上传图片" prop="productimagesrc">
    <input @change='changeImg' id='imgFile' type='file'/>
    <!-- 展示服务器返回的图片 -->
    <img style="width: 200px;height: 200px" :src='form.productimagesrc'/>
  </el-form-item>
</el-form>

</template>
<script>
export default {
  data() {
    return {
      form: {
        productimagesrc: ''
      },

    };
  },
  methods: {
    changeImg(){
      var that = this;  //这里使用一个变量 that来拼接this,这样的话在内部就使用thar,在外部就使用this,这样就不会出现指向丢失问题。
      var file = document.getElementById("imgFile").files[0]; //获取文件
      console.log("file：",file)
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加到FormData里面，这样就可以直接把formData作为参数传递了
      if (file) {
        formData.append("file", file);　　　//接口需要传递的参数
      }
 
      let urls = 'http://localhost:8088/productConsumer/upload';   //数据接口
      axios.post(urls,formData)
              .then(function(reh){
                console.log('rehsdddddd===>>>', reh);
                that.form.productimagesrc = reh.data.result
              })
              .catch(function(err){
                console.log('err=ssss=>>', err);
              })
    },

  //   async uploadImage() {
  //     const formData = new FormData();
  //     formData.append('image', this.$refs.file.files[0]);
 
  //     try {
  //       const response = await axios.post('/api/upload', formData, {
  //         headers: { 'Content-Type': 'multipart/form-data' },
  //       });
 
  //       this.imageUrl = response.data.imageUrl;
  //     } catch (error) {
  //       console.error(error);
  //     }
  //   },
  },
  mounted() {
  },
};
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

.label-list {
  display: flex;
}

.label-group {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 50px;
  font-size: 12px;
}


</style>